<template>
  <div class="zon-container wap">
    <div class="header display-flex align-items-center">
      <img class="close" src="../../assets/img/cart/close.png">
      <group class="flex-1">
        <x-input @keyup.enter.native="showSearch" v-model="searchKey" type="text" :show-clear="false"
                 :placeholder="searchIcon"></x-input>
      </group>
      <span class="btn-search">搜索</span>
    </div>

    <div class="main">
      <scroller
        ref="scroll"
        :noDataText="this.$noData(customerList)"
        :on-refresh="refresh"
        :on-infinite="infinite">
        <div class="list">
          <customerItem @dialogComfrim="dialogComfrim" :checkListArray="checkListArray"  :list="customerList"></customerItem>
        </div>
        <no-data v-show="loadOk" @refreshData="refresh(0)" :list="customerList"></no-data>
      </scroller>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
    import  customerItem from  '../../components/customer-manager-item.vue'
    export default{
        components:{
            customerItem
        },
        data(){
            return {
                searchIcon: '\ue630 输入分类信息',
                searchKey: '',
                page:1,
                title:'',
                categoryId:'',
                customerList:[],
                hasNext:true,
                checkListArray:[],
                loadOk:false
            }
        },
        created(){
            this.title=decodeURIComponent(this.$route.query.title).toString().replace(/%/g,'~~pct~~');
            this.categoryId=68;
            this.initCheckList();
            this. initData(0);
        },
        methods:{
        showSearch() {
            if (this.searchKey.trim().length == 0) {
                this.$vux.toast.text("请输入关键词", 'center');
                return;
            }
            this.refeshData()
        },
            initCheckList(){
                this.$ajax.get("customer/category/list",(res) => {
                    if(res.code==200){
                        for(var i=0;i<res.data.length;i++){
                            this.checkListArray.push({key:res.data[i].id,value:res.data[i].name});
                        }
                    }else{
                        this.$vux.toast.text(res.msg, 'center');
                    }
                },{})
            },
            initData(type){
                this.$ajax.get("customer/category/group/list",(res) => {
                    console.log("-====",res)
                    if(res.code==200){
                        if(type==0){
                            this.customerList=res.data;
                        }else{
                            this.customerList=this.customerList.concat(res.data);
                        }

                        type==0&&this.$refs.scroll&&this.$refs.scroll.finishPullToRefresh();
                        if(res.data&&res.data.length<this.$rows||res.data==undefined){
                            this.hasNext=false;
                            type==1&&this.$refs.scroll&&this.$refs.scroll.finishInfinite(true);
                        }else{
                            this.hasNext=true;
                            type==1&&this.$refs.scroll&&this.$refs.scroll.finishInfinite(false);
                        }
                    }else{
                        this.hasNext=false;
                        this.$vux.toast.text(res.msg, 'center');
                        type==0&&this.$refs.scroll&&this.$refs.scroll.finishPullToRefresh();
                        type==1&&this.$refs.scroll&&this.$refs.scroll.finishInfinite(false);
                    }
                    this.loadOk=true
                },{pageNo :this.page,pageSize:this.$rows,customerCategoryId:this.categoryId});
            },
            refresh(){
                this.hasNext=true;
                this.page=1;
                this.initData(0);
            },
            infinite(){
                if(this.hasNext){
                    this.page++;
                    this.initData(1);
                }else{
                    this.$refs.scroll&&this.$refs.scroll.finishInfinite(true)
                }
            },
            dialogComfrim(){
                this.hasNext=true;
                this.page=1;
                this.initData(0);
            }
        }
    }
</script>

<style  lang="less" type="text/less" scoped>
  .zon-container{
    background: #fff;
    .list{
      padding: .2rem .3rem;
    }
    .header{
      .close{
        width: .3rem;
        height: .3rem;
        padding: .3rem;
      }
      .btn-search{
        padding: 0rem .2rem;
        color: #999;
        font-size: .3rem;
      }
    }

    /deep/ .weui-cell {
      background: #F6F6F6 !important;
      padding: 0rem;
    }
    /deep/ .weui-cells {
      margin-top: 0 !important;

    }
    /deep/ .weui-input {
      font-size: .28rem;
      text-align: left;
      background: #eee;
      border-radius: .32rem;
      height: .64rem;
      padding-left: .3rem;
      box-sizing: border-box;
    }
    /deep/ .weui-cells:after{
      border: none;
    }
    ::-webkit-input-placeholder { /*Webkit browsers*/
      color: #c6c6c6;
      font-size: 16px;
      font-family: "iconfont" !important;
    }
    :-moz-placeholder { /*Mozilla Firefox 4 to 8*/
      color: #c6c6c6;
      font-size: 16px;
      font-family: "iconfont" !important;
    }
    ::moz-placeholder { /*Mozilla Firefox 19+*/
      color: #c6c6c6;
      font-size: 16px;
      font-family: "iconfont" !important;
    }
    :-ms-input-placeholder { /*Internet Explorer 10+*/
      color: #c6c6c6;
      font-size: 16px;
      font-family: "iconfont" !important;
    }
  }
</style>
